<template>
	<view class="container">
		<view class="content">
			<owner-info :item="carInfo"></owner-info>
			<view class="order-info">
				<text class="txt1">订单信息</text>
				<view class="txt2">
					<text class="txt2-1">销售</text>
					<text class="txt2-2">{{orderInfo.employeeName}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">业务渠道</text>
					<text class="txt2-2">暂无</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">订单编号</text>
					<text class="txt2-2">{{orderInfo.saleId}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">下单时间</text>
					<text class="txt2-2">{{orderInfo.createTime}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">安排订单</text>
					<text class="txt2-2">
						{{orderInfo.orderSettlement?orderInfo.orderSettlement.settlementItemList[0].createTime:"加载中"}}
					</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">安排师傅</text>
					<text class="txt2-2">{{orderInfo.setEmployeeTime}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">施工开始</text>
					<text class="txt2-2">{{orderInfo.constructionTime}}</text>
				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">车辆照片(正面、侧面45°、侧后45°、背面)</text>
				</view>
				<view class="photo-content">
					<template v-for="(item,index) in carPhtoto" :key="index">
						<image class="photo" :src="item" mode="aspectFill" @click="previewImage(carPhtoto,index)">
						</image>
					</template>
				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">服务项目</text>
				</view>
				<view class="chosenContent" style="background-color:  #ededf4;border: none;"
					v-for="(item,index) in orderService" :key="item.serviceItemId">
					<view class="top">
						<view class="serv">
							<text class="service">{{item.name}}</text>
							<text v-if="item.productSku" class="product">{{item.productSku.productName}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">施工主管</text>
				</view>
				<view class="chosenContent" style="border: none;">
					<view class="manager">
						<!-- <image v-if="'avatar' in item" :src="item.avatar" mode="heightFix"></image> -->
						<text class="name">{{orderInfo.managerName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="add-info">
			<view class="title">
				<text class="txt" style="margin-bottom: 32rpx;">车辆检查照片</text>
				<image class="add" src="https://peixin.peiyu.online/xmk/images/添加.png" mode="widthFix"
					@click="upload_checkImage_Tem"></image>
			</view>
			<view class="photo-content-up">
				<template v-for="(item,index) in photoCheckTemPath" :key="index">
					<image class="photo" :src="item" mode="aspectFill" @click="previewImage(photoCheckTemPath,index)">
					</image>
				</template>
			</view>
		</view>
		<view class="add-info">
			<view class="title">
				<text class="txt" style="margin-bottom: 32rpx;">施工保护照片</text>
				<image class="add" src="https://peixin.peiyu.online/xmk/images/添加.png" mode="widthFix"
					@click="upload_protectImage_Tem"></image>
			</view>
			<view class="photo-content-up">
				<template v-for="(item,index) in photoProtectTemPath" :key="index">
					<image class="photo" :src="item" mode="aspectFill" @click="previewImage(photoProtectTemPath,index)">
					</image>
				</template>
			</view>
		</view>
		<view class="add-info">
			<view class="title">
				<text class="txt" style="margin-bottom: 32rpx;">施工完成照片</text>
				<image class="add" src="https://peixin.peiyu.online/xmk/images/添加.png" mode="widthFix"
					@click="upload_completeImage_Tem"></image>
			</view>
			<view class="photo-content-up">
				<template v-for="(item,index) in photoCompleteTemPath" :key="index">
					<image class="photo" :src="item" mode="aspectFill"
						@click="previewImage(photoCompleteTemPath,index)">
					</image>
				</template>
			</view>
		</view>

		<view class="btn" @click="onclick">
			完工
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		BASE_URL
	} from "../../../../utils/request.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		api_get_order_easy_info,
		api_saleOrder_getInfo,
		api_saleOrder_updateBuildStatus,
		api_serviceEmployee_list,
		api_serviceEmployee_receiveService,
		api_orderService_uploadCompleteImage,
		api_orderService_uploadProtectImage,
		api_orderService_uploadCheckImage,
		api_serviceEmployee_getServiceByEmployeeId,
		api_serviceEmployee_completeServiceItem
	} from "../../../../apis/apis.js"
	import {
		useMainStore
	} from '@/utils/store.js';

	const store = ref(useMainStore());
	const carInfo = ref({}); //订单简易信息
	const orderInfo = ref({}); //订单其他信息
	const orderService = ref([]); //订单选择的服务
	const carPhtoto = ref([]); //订单车辆图片
	const photoCheckTemPath = ref([]);
	const photoProtectTemPath = ref([]);
	const photoCompleteTemPath = ref([]);
	const photoCheck = ref([]);
	const photoProtect = ref([]);
	const photoComplete = ref([]);


	//点击预览图片
	const previewImage = (photoTemPath, index) => {
		uni.previewImage({
			current: index,
			urls: photoTemPath
		});
	};

	//上传施工检查照 本地地址
	const upload_checkImage_Tem = () => {
		uni.chooseImage({
			count: 9,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
			success: (res) => {
				console.log(res);
				photoCheckTemPath.value = res.tempFilePaths;
			}
		})
	};
	//上传施工保护照 本地地址
	const upload_protectImage_Tem = () => {
		uni.chooseImage({
			count: 9,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
			success: (res) => {
				console.log(res);
				photoProtectTemPath.value = res.tempFilePaths;
			}
		})
	};
	//上传施工完成照 本地地址
	const upload_completeImage_Tem = () => {
		uni.chooseImage({
			count: 9,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'], //这要注意，camera是拍照，album是打开手机相册
			success: (res) => {
				console.log(res);
				photoCompleteTemPath.value = res.tempFilePaths;
			}
		})
	};


	//上传施工检查照  被upload_image_check调用
	const uploadFilePromise_check = (url) => {
		return new Promise((resolve, reject) => {
			uni.showLoading({
				mask: true,
				title: "上传图片中"
			})
			let a = uni.uploadFile({
				url: `${BASE_URL}/file/upload`,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					resolve(res);
					console.log("上传成功", JSON.parse(res.data).data)
					photoCheck.value.push(JSON.parse(res.data).data);
					uni.hideLoading();
				},
				fail: (err) => {
					console.log("上传失败", err);
					uni.hideLoading();
				},
				complete: (msg) => {
					console.log("上传结束");
					uni.hideLoading();
				}
			});
		});
	};

	//上传施工保护照  被upload_image_protect调用
	const uploadFilePromise_protect = (url) => {
		return new Promise((resolve, reject) => {
			uni.showLoading({
				mask: true,
				title: "上传图片中"
			})
			let a = uni.uploadFile({
				url: `${BASE_URL}/file/upload`,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					resolve(res);
					console.log("上传成功", JSON.parse(res.data).data)
					photoProtect.value.push(JSON.parse(res.data).data);
					uni.hideLoading();
				},
				fail: (err) => {
					console.log("上传失败", err);
					uni.hideLoading();
				},
				complete: (msg) => {
					console.log("上传结束");
					uni.hideLoading();
				}
			});
		});
	};

	//上传施工完成照  被upload_image_complete调用
	const uploadFilePromise_complete = (url) => {
		return new Promise((resolve, reject) => {
			uni.showLoading({
				mask: true,
				title: "上传图片中"
			})
			let a = uni.uploadFile({
				url: `${BASE_URL}/file/upload`,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					resolve(res);
					console.log("上传成功", JSON.parse(res.data).data)
					photoComplete.value.push(JSON.parse(res.data).data);
					uni.hideLoading();
				},
				fail: (err) => {
					console.log("上传失败", err);
					uni.hideLoading();
				},
				complete: (msg) => {
					console.log("上传结束");
					uni.hideLoading();
				}
			});
		});
	};


	//上传所有施工检查照
	const upload_image_check = async (list) => {
		//上传图片
		for (let i = 0; i < list.length; i++) {
			try {
				await uploadFilePromise_check(list[i]);
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
		}
		//调用接口
		try {
			photoCheck.value = photoCheck.value.map(item => {
				return {
					item,
					"id": store.value.currentUser.id
				};
			})
			console.log(photoCheck.value);
			await api_orderService_uploadCheckImage({
				saleId: orderInfo.value.saleId,
				checkImage: JSON.stringify(photoCheck.value),
				employeeIds: store.value.currentUser.id
			});
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	}

	//上传所有施工保护照
	const upload_image_protect = async (list) => {
		//上传图片
		for (let i = 0; i < list.length; i++) {
			try {
				await uploadFilePromise_protect(list[i]);
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
		}
		try {
			//调用接口
			photoProtect.value = photoProtect.value.map(item => {
				return {
					item,
					"id": store.value.currentUser.id
				};
			})
			console.log(photoProtect.value);
			await api_orderService_uploadProtectImage({
				saleId: orderInfo.value.saleId,
				protectImage: JSON.stringify(photoProtect.value),
				employeeIds: store.value.currentUser.id
			});
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	}


	//上传所有施工完成照
	const upload_image_complete = async (list) => {
		//上传图片
		for (let i = 0; i < list.length; i++) {
			try {
				await uploadFilePromise_complete(list[i]);
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
		}
		try {
			//调用接口
			photoComplete.value = photoComplete.value.map(item => {
				return {
					item,
					"id": store.value.currentUser.id
				};
			})
			console.log(photoComplete.value);
			await api_orderService_uploadCompleteImage({
				saleId: orderInfo.value.saleId,
				completeImage: JSON.stringify(photoComplete.value),
				employeeIds: store.value.currentUser.id
			});
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}

	}


	//点击完工
	const onclick = () => {
		uni.showModal({
			title: "确认完工？",
			success: async (res) => {
				if (res.confirm) {
					if (photoCheckTemPath.value != [] && photoProtectTemPath.value != [] &&
						photoCompleteTemPath.value != []) {
						//上传施工检查照
						try {
							await upload_image_check(photoCheckTemPath.value);
						} catch (e) {
							uni.showToast({
								title: e.msg,
								icon: "none"
							});
						}
						//上传施工保护照
						try {
							await upload_image_protect(photoProtectTemPath.value);
						} catch (e) {
							uni.showToast({
								title: e.msg,
								icon: "none"
							});
						}
						//上传施工完成照
						try {
							await upload_image_complete(photoCompleteTemPath.value);
						} catch (e) {
							uni.showToast({
								title: e.msg,
								icon: "none"
							});
						}
						//完成服务
						try {
							await api_serviceEmployee_completeServiceItem({
								orderServiceId: orderInfo.value.orderService.orderServiceId
							});
							uni.showToast({
								title: "完成",
								icon: "success"
							});
						} catch (e) {
							uni.showToast({
								title: e.msg,
								icon: "none"
							});
						}
						//返回
						uni.navigateBack({
							delta: 1,
							succes() {
								uni.showToast({
									title: "完成!",
									icon: 'success'
								});
							}
						});
					} else {
						uni.showToast({
							title: "请添加完整的照片",
							icon: 'error'
						});
						return;
					}
				}
			}
		})
	};

	onShow(async () => {
		let param = {
			saleId: store.value.orderId
		};
		//查询订单简易信息
		try {
			let res1 = await api_get_order_easy_info(param);
			carInfo.value = res1.data;
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}

		// 查询订单其他信息
		try {
			let res2 = await api_saleOrder_getInfo(param);
			orderInfo.value = res2.data; // 订单其他信息
			carPhtoto.value = JSON.parse(res2.data.carImage); // 订单的汽车图片

			try {
				let res3 = await api_serviceEmployee_getServiceByEmployeeId({
					employeeId: store.value.currentUser.id,
					orderServiceId: res2.data.orderService.orderServiceId
				});
				orderService.value = res3.data; // 师傅的订单的服务项目列表
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}

	});

	onLoad(() => {

	});
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ededf4;
			width: 750rpx;
			padding-top: 36rpx;
			height: auto;

			.order-info {
				background-color: $main-background-color;
				width: 700rpx;
				height: auto;
				display: flex;
				flex-direction: column;
				align-items: left;
				gap: 10rpx;
				margin-top: 50rpx;

				.txt1 {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.txt2 {
					display: flex;
					align-items: center;

					.txt2-1 {
						width: 160rpx;
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 34rpx;
						color: $font-primary-color;
						margin-right: 30rpx;
					}

					.txt2-2 {
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 36rpx;
						color: $font-sub-color;
					}
				}
			}
		}

		.add-info {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 700rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txt {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.add {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.photo-content {
				width: 700rpx;
				display: flex;
				flex-wrap: wrap;

				.photo {
					width: 170rpx;
					height: 170rpx;
					margin-top: 32rpx;
				}
			}

			.photo-content-up {
				width: 700rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 5rpx;

				.photo {
					width: 230rpx;
					height: 230rpx;
				}
			}

			.chosenContent {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: left;
				border-bottom: 1rpx solid $border-color;

				.top {
					padding-top: 20rpx;
					width: 100%;
					// display: flex;
					// justify-content: space-between;
					align-items: center;

					.serv {
						display: flex;
						align-items: center;

						.service {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-primary-color;
							margin-right: 10rpx;
						}

						.product {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-sub-color;
						}
					}
				}
			}

			.price1 {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 250;
				font-size: 30rpx;
				color: #FF602B;
			}

			.price2 {
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 34rpx;
				color: #FF602B;
			}

			.manager {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10rpx 0;

				image {
					width: 40rpx;
					border-radius: 100rpx;
					overflow: hidden;
					height: 100rpx;
				}

				.name {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-sub-color;
					margin-left: 14rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: $primary-color;
			font-family: Alibaba_PuHuiTi_Regular;
			font-weight: 400;
			font-size: 38rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;

		}
	}
</style>